<template>
    <!-- 会员兑换 -->
    <view class="page-container">
        <!-- 导航栏 -->
        <up-navbar placeholder title="会员兑换" :autoBack="true" titleColor="#FFFFFF" leftIconColor="#FFFFFF"
            bgColor="rgba(255,255,255,0)"></up-navbar>
        <image src="https://falvren.oss-cn-beijing.aliyuncs.com/20250614155227bccb5.png" class="bg-image"></image>
        <!-- 会员兑换 -->
        <view class="flex justify-around items-center mt-[50rpx]">
            <view>
                <image class="w-[204rpx] h-[48rpx]" src="@/static/images/img/会员兑换.png"></image>
                <view class="hym mt-[20rpx]">使用会员码兑换哦</view>
            </view>
            <view>
                <image class="w-[343.13rpx] h-[308rpx]" src="@/static/images/img/member-card.png"></image>
            </view>
        </view>

        <!-- 输入框 -->
        <view class="input-container w-[574rpx] h-[84rpx] ml-[10rpx] ">
            <up-input style="border: 2rpx solid #494949 !important ;" color="#B9B9B9" placeholder="请输入内容" :customStyle="{
            background: '#222222',
            borderRadius: '16rpx',
            border: '2rpx solid #494949',
        }" v-model="code"></up-input>
        </view>

        <!-- 兑换按钮 -->
        <view class="w-[300rpx] h-[88rpx] mt-[124rpx] mx-[225rpx]">
            <up-button @click="handleExchange" text="立即兑换" :customStyle="{
            color: '#000000',
            borderRadius: '16rpx',
            fontSize: '28rpx',
            lineHeight: '40rpx',
            background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%)',
        }"></up-button>
        </view>

        <!-- 错误提示弹窗 -->
        <view class="popup-mask" v-if="showPopup" @click.stop="closePopup">
            <view class="popup-content" @click.stop>
                <view class="popup-close" @click="closePopup">
                    <text class="close-icon">×</text>
                </view>
                <view class="popup-emoji">
                    <image src="@/static/images/img/sikao.png" class="emoji-image"></image>
                </view>
                <view class="popup-text">{{errorMsg}}</view>
                <view class="popup-button" @click="closePopup">
                    <text>我知道了</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { inviteCode } from '@/api/system/code';

const code = ref('');
const showPopup = ref(false);
const errorMsg = ref('兑换码不正确，请重新再试');
const loading = ref(false);

// 处理兑换逻辑
const handleExchange = async () => {
    if (!code.value) {
        errorMsg.value = '请输入兑换码';
        showPopup.value = true;
        return;
    }
    
    if (loading.value) return;
    loading.value = true;
    
    try {
        const res = await inviteCode({ code: code.value });
        if (res.code == 200) {
            // 兑换成功
            uni.showToast({
                title: '兑换成功',
                icon: 'success'
            });
            // 兑换成功后跳转到兑换成功页面
            setTimeout(() => {
                uni.navigateTo({
                    url: '/pages_qc/exchange_cg/exchange_cg'
                });
            }, 1500);
        } else {
            // 兑换失败
            errorMsg.value = res.msg || '兑换码不正确，请重新再试';
            showPopup.value = true;
        }
    } catch (error) {
        console.error('兑换失败:', error);
        errorMsg.value = '网络异常，请稍后再试';
        showPopup.value = true;
    } finally {
        loading.value = false;
    }
};

// 显示错误弹窗
const showErrorPopup = () => {
    showPopup.value = true;
};

// 关闭弹窗
const closePopup = () => {
    showPopup.value = false;
};
</script>

<style lang="less">
.page-container {
    min-height: 100vh;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 421.88rpx;
    z-index: 0;
}

.hym {
    width: 248rpx;
    height: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #B9B9B9;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
}

.input-container {
    width: 584rpx;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
    z-index: 1;
}

.code-input {
    padding: 24rpx;
    width: 574rpx;
    height: 84rpx;
    background: #222222;
    border-radius: 16rpx;
}

/* 弹窗样式 */
.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.popup-content {
    width: 500rpx;
    background-color: #333333;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-close {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
}

.close-icon {
    font-size: 40rpx;
    color: #FFFFFF;
}

.popup-emoji {
    margin: 20rpx 0;
}

.emoji-image {
    width: 120rpx;
    height: 120rpx;
}

.popup-text {
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    margin: 20rpx 0 40rpx;
}

.popup-button {
    width: 472rpx;
    height: 88rpx;
    background: linear-gradient(98deg, #454545 0%, #000000 100%);
    border-radius: 16rpx;
    color:#FFEFB8;
    font-size: 32rpx;
   
    display: flex;
    align-items: center;
    justify-content: center;
    
    
}
</style>